#welcome {
    flex: 1 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: start;

    line-height: 1.4em;

    .welcome {
        flex: 1 1 auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;

        padding: 16px 32px;
    }

    .state {
        margin-top: 1em;

        &.error {
            color: $status-error;
        }
    }

    .instructions {
        &.centered {
            text-align: center;
        }
    }

    h2 {
        display: block;
        margin-bottom: 20px;
    }

    p {
        font-size: .9em;
    }

    md-input-container {
        margin-right: 32px;
        margin-left: 32px;

        .md-errors-spacer {
            display: none;
        }
    }

    .scan {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: start;

        .ios-only-warning {
            display: flex;
            flex-direction: horizontal;
            margin-bottom: 16px;
            background-color: $status-warning;
            padding: 8px;

            p {
                line-height: 1.4em;
                letter-spacing: -.2px;
                font-size: .8em;
            }

            img {
                margin-right: 8px;
                width: 32px;
            }
        }

        .password-entry {
            margin-top: 16px;
            text-align: center;

            input {
                text-align: center;
            }
        }

        .instructions {
            margin-bottom: 16px;

            .title {
                padding-bottom: 4px;
                text-wrap: pretty;
            }

            .text {
                color: rgba(0, 0, 0, 0.65);
                font-size: 13px;
                line-height: 21px;
            }
        }

        md-input-container {
            margin: 12px 0 16px 0;

            input {
                border-bottom-width: 0;
            }
        }

        qrcode {
            margin: 0px;
            text-align: center;

            &.small {
                margin: 0px 58px;
            }

            canvas {
                max-width: 100%;
            }
        }
    }

    .unlock {
        text-align: center;
        padding-top: 16px;

        .password-entry {
            margin-top: 32px;
            margin-bottom: 48px;

            input {
                text-align: center;
            }
        }

        md-input-container {
            margin-top: 24px;
            margin-bottom: 8px;
        }

        button {
            margin-top: 0;
            margin-bottom: 32px;
            margin-left: 0;
        }
    }

    .manual-start {
        text-align: center;

        .illustration {
            margin-top: 24px;
            margin-bottom: 24px;
        }

        ol {
            margin: 16px auto 0;
            width: 90%;
            list-style-position: inside;

            li {
                margin-bottom: 4px;
            }
        }
    }

    .already-connected {
        .illustration {
            margin-top: 16px;
            margin-bottom: 28px;
            margin-left: 12px;
        }
    }

    .loading {
        $progress-height: 250px;
        $progress-overlap: 70px;
        margin-top: 48px;

        md-progress-circular {
            margin: 0 auto calc(-#{$progress-height} + #{$progress-overlap});
            height: $progress-height;

            svg path {
                stroke-width: 12px !important;
            }
        }

        .info {
            text-align: center;

            .percentage {
                margin-bottom: 8px;
                vertical-align: center;
                line-height: 1em;
                font-size: 4em;
                font-weight: 300;
            }
        }

        .troubleshoot {
            margin-top: 80px;

            h3 {
                height: 32px;
            }

            ul {
                font-size: .9em;

                li {
                    padding: 0 1em .3em;
                    line-height: 1.2em;
                }
            }

            .forget {
                margin-top: 8px;
            }

            .reload-btn {
                margin: 20px 10px 0;
                padding: 0 10px;
                height: 35px;
            }
        }
    }

    .password-strength-indicator {
        display: flex;
        align-content: stretch;
        width: 100%;
        height: 2px;

        .reached {
            background-color: #999999;
        }

        .unreached {
            background-color: $background-grey;
        }
    }

    md-input-container.md-input-focused .password-strength-indicator .unreached {
        background-color: darken($background-grey, 7%);
    }

    .desktop-beta-banner {
        padding: 22px 28px;
        background-color: $theme-b100;

        .prose {
            margin-bottom: 12px;

            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
        }

        .button {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 14px;

            padding: 12px 24px 12px 48px;
            overflow: hidden;

            color: white;
            background-color: $theme-primary;
            border-radius: 5px;

            box-shadow: 0 2px 5px 0 rgba($theme-primary, 0.25);

            transition: all .15s ease-out;

            .badge {
                position: absolute;
                top: -16px;
                left: -40px;

                padding: 32px 32px 6px 32px;
                color: white;
                background-color: $theme-b300;
                font-weight: 900;
                text-transform: uppercase;

                transform: rotate(-50deg);
            }

            .content {
                flex: 1 0 auto;

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 14px;

                .app-icon {
                    width: 34px;
                    border-radius: 5px;
                }
            }

            md-icon {
                flex: 0 0 auto;

                margin: 0;
                color: white;
            }

            &:hover {
                background-color: $theme-b200;

                box-shadow: 0 3px 15px 0 rgba($theme-primary, 0.35);

                transform: translateY(-1px);

                md-icon {
                    animation-duration: .375s;
                    animation-name: jump;
                    animation-iteration-count: 1;
                    animation-timing-function: cubic-bezier(0.00, 0.10, 0.10, 1.0);
                }
            }
        }

        &.work {
            background-color: $work-b100;

            .button {
                background-color: $work-primary;

                box-shadow: 0 2px 5px 0 rgba($work-primary, 0.25);

                .badge {
                    background-color: $work-b300;
                }

                &:hover {
                    background-color: $work-b200;

                    box-shadow: 0 3px 15px 0 rgba($work-primary, 0.35);
                }
            }
        }
    }

    @keyframes jump {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-8px) scaleY(0.95) scaleX(1.05);
        }

        75% {
            transform: translateY(4px);
        }

        100% {
            transform: translateY(0px);
        }
    }
}
